<template>
	<div>
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />
			<div>
				<el-button v-prmis="'goods_change_exportGc'" type="primary" size="small">
					<template #default>
						<span class="text-sm" @click="getExport">{{ $t('public.export') }} Excel</span>
					</template>
				</el-button>
			</div>
		</div>
		<div class="app-container" v-loading="data.mtloading">
			<!-- 表格 -->
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" height="650">
				<!-- <el-table-column type="expand">
					<template #default="props">
						<el-table :data="props.row.details" :header-cell-style="{ 'text-align': 'center' }"
							:cell-style="{ 'text-align': 'center' }" class="w-full">
							<el-table-column :label="$t('eventlog.goods.goods')">
								<template #default="scope">
									<img v-if="scope.row.pic" :src="scope.row.pic" alt="">
									<img v-else class="w-16 h-16 m-auto" src="@/assets//shop.png" alt="">
								</template>
							</el-table-column>
							<el-table-column prop="g_name" :label="$t('machine.goods.name')" />
							<el-table-column prop="sku" label="SKU" />
							<el-table-column prop="bar_code" :label="$t('eventlog.goods.barCode')" />
							<el-table-column prop="gc_name" :label="$t('eventlog.goods.name')"/>
						</el-table>
					</template>
				</el-table-column> -->
				<el-table-column prop="machine_id" :label="$t('machine.code')" />
				<el-table-column prop="machine_name" :label="$t('machine.name')" />
				<el-table-column prop="sku" label="SKU" />
				<el-table-column prop="g_name" :label="$t('machine.goods.name')" />				
				<el-table-column prop="channel_code" :label="$t('eventlog.goods.shelfNumber')"/>
				<el-table-column prop="change_value" :label="$t('eventlog.goods.change')"/>
				<el-table-column :label="$t('eventlog.goods.type')">
					<template #default="scope">
						{{ $t(setType(scope.row)) }}
					</template>
				</el-table-column>
				<el-table-column prop="position" :label="$t('public.location')">
					<template #default="scope">
						{{ setPosition(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column prop="creator_nickname" :label="$t('report.supplement.operator')"></el-table-column>
				<el-table-column prop="desc" :label="$t('machine.operations.notes')" />
				<el-table-column :label="$t('date.createTime')" width="200">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<PageNum :total="data.total" :page="data.info" @exposeData="current" @fraction="fraction" />
		</div>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false"/>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from "@/components/TopInfo/index.vue";
import Search from "@/components/Search/index.vue";
import PageNum from "@/components/PageNum/index.vue";
import getPlevel from "@/utils/level";
import { goodsChangeList, goodsChangExport } from "@/api/eventlog";
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
import { onMounted } from 'vue'
import { setLastmonth,setThismonth } from '@/utils/index'
const dialogExport = ref(false)
let data = reactive({
	mtloading: false, // 加载
	lookup: [
		// 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('machine.goods.name'), type: "input", value: "", key: "g_name" },
		{ title: $t('eventlog.goods.goods')+' SKU', type: "input", value: "", key: "sku" },
		{ title: $t('eventlog.goods.shelfNumber'), type: "input", value: "", key: "channel_code" },
		{ title: $t('date.createTime'), type: "time", value: "", key: "time" },
		{ title: $t('eventlog.goods.type'), type: 'define', select: getPlevel.typeChangeList, key: "type"}
	],
	list: [], // 列表信息
	info: {
		// 筛选数据
		create_time: "",
		machine_name: "",
		m_id: '',
		channel_code: '',
		sku: '',
		g_name: '',
		page: 1,
		pageNum: 15,
	},
	total: 0, // 总条数
});
onMounted(()=>{
	let pay_time = ''
	let dates = [];
	dates[0] = setLastmonth()
	dates[1] = setThismonth()
	data.lookup[4].value = dates
	pay_time = setLastmonth() + ' ' + '00:00:00' + '~' + setThismonth() + ' ' + '23:59:59'
	getlist(pay_time)
})
let setType = (row) => {
	getPlevel.typeChangeList.forEach(item => {
		if (item.value == row.type) {
			row.typeCn = item.label
		}
	})
	return row.typeCn
}
// 导出
let getExport = () => {
	let obj = {
		create_time: data.info.create_time,
		machine_name: data.info.machine_name,
		m_id: data.info.m_id,
		channel_code: data.info.channel_code,
		sku: data.info.sku,
		g_name: data.info.g_name,
	}
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		goodsChangExport(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	})
}
let setPosition = (row) => {
	if (row.position == 1) {
		row.positionCn = '货架'
	}
	if (row.position == 2) {
		row.positionCn = '设备商品库'
	}
	return row.positionCn
}
// 获取列表信息
let getlist = (e:any) => {
	if(e){
		data.info.create_time = e
	}
	data.mtloading = true
	goodsChangeList(data.info)
		.then((res) => {
			data.mtloading = false
			if (res.state == 200) {
				for (let item of res.data.data) {
					item.details = [{
						pic: item.pic,
						g_name: item.g_name,
						sku: item.sku,
						bar_code: item.bar_code,
						gc_name: item.gc_name
					}]

				}
				data.list = res.data.data;
				data.total = res.data.total
			}
		})
		.catch((err) => { });
};

// 查询参数回调
let inves = (e) => {
	data.info.create_time = ''
	for (let key in e) {
		if (key != 'time') {
			data.info[key] = e[key]
		}
	}
	if (e.time != '') {
		data.info.create_time = e.time[0] + '~' + e.time[1]
	}
	data.info.page = 1;
	data.info.pageNum = 15;
	getlist();
};

// 页数回调
let current = (e) => {
	data.info.page = e;
	getlist();
};

// 条数回调
let fraction = (e) => {
	data.info.pageNum = e;
	getlist();
};
getlist();
</script>